<template>
  <div>
    <div>
      <div>
    <div class="left" id="chulitongji" style="width: 50%;height: 400px;"></div>
    <div class="right" id="kehushuliang" style="width: 50%;height: 400px;"></div>
    </div>
    </div>
    <div>
      <el-tag type="success"><i class="el-icon-circle-check"> 已放款</i></el-tag>
      <label v-text="fangkuan"></label>
      <br>
      <br>
      <el-tag type="danger"><i class="el-icon-bell"> 待内审</i></el-tag>
      <label v-text="daineishen"></label>
      <br>
      <br>
      <el-tag type="warning"><i class="el-icon-edit-outline"> 待外审</i></el-tag>
      <label v-text="daiwaishen"></label>
      <br>
      <br>
      <el-tag type="primary"><i class="el-icon-data-board"> 财务审核</i></el-tag>
      <label v-text="caiwushenhe"></label>
    </div>
  </div>
</template>

<script>
  var dateString = '2018-02-09';var dateObject = new Date(dateString);
  dateObject.getDay()

  export default {
    data() {
      return {
        fangkuan:localStorage.getItem("fangkuan")+"人 "+localStorage.getItem("fangkuanjine")+"元",
        daineishen:localStorage.getItem("daineishen")+"人",
        daiwaishen:localStorage.getItem("daiwaishen")+"人",
        caiwushenhe:localStorage.getItem("caiwushenhe")+"人",
        date:dateObject.getDay()
      };
    },
    mounted(){
      this.init()
    },
    methods:{
      init(){
        this.mychart =this.$echarts.init(document.getElementById("chulitongji"));
        this.mychart.setOption({
          title:{
            show:true,
            text:'处理情况统计'
          },
          textStyle:{
            fontSize:22,
            fontWeight:'bold'
          },
          xAxis: {
            type: 'category',
            data: ['已放款', '待内审', '待外审', '财务审核']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [localStorage.getItem("fangkuan"),
              localStorage.getItem("daineishen"),
              localStorage.getItem("daiwaishen"),
              localStorage.getItem("caiwushenhe")],
            type: 'bar',
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = [
                    '#4FC17C','#c33620','#fcbf5d','#dde844'
                  ];
                  return colorList[params.dataIndex]
                }
              }
            },
            barWidth:70,

          }]
        })
        this.mychart2 = this.$echarts.init(document.getElementById("kehushuliang"))
        this.mychart2.setOption({
          title:{
            show:true,
            text:'人数统计'
          },
          textStyle:{
            fontSize:22,
            fontWeight:'bold'
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [localStorage.getItem("yue1"),
              localStorage.getItem("yue2"),
              localStorage.getItem("yue3"),
              localStorage.getItem("yue4"),
              localStorage.getItem("yue5"),
              localStorage.getItem("yue6"),
              localStorage.getItem("yue7"),
              localStorage.getItem("yue8"),
              localStorage.getItem("yue9"),
              localStorage.getItem("yue10"),
              localStorage.getItem("yue11"),
              localStorage.getItem("yue12"),
             ],
            type: 'line'
          }]
        })
      }
    }
  }
</script>

<style>
  label{
    font-size: 24px;

  }
  .right{
    float: right;
  }
  .left{
    float: left;
  }
  el-tag{
    font-size: 30px;
    font-weight: bold;
  }
</style>
